<script lang='ts' setup>
import { reactive } from 'vue'
import { resources_move } from '@/apis/toolbox/resources/resources_move.ts'

const emits = defineEmits(['update:show', 'success'])

const props = defineProps({
  show: { required: true, type: Boolean },
  path: { required: true, type: String }
})

const state = reactive<{ path: string, saving: boolean }>({ path: '/', saving: false })

async function close(): Promise<void> {
  state.path = '/'
  emits('update:show', false)
}

async function move(): Promise<void> {
  state.saving = true
  const response = await resources_move(props.path!, state.path)
  state.saving = false

  if (0 !== response.code) {
    window.$message.error(response.message)

    return
  }

  window.$message.success('移动完成')
  await close()
  emits('success')
}
</script>

<template>
  <n-modal :closable='false' :close-on-esc='false' :mask-closable='false' :show='props.show' class='resources-move-modal' transform-origin='center' @update:show='close'>
    <n-card>
      <n-space vertical>
        <n-divider>移动</n-divider>
        <div>
          <n-input-group>
            <n-input-group-label size='small'>源路径</n-input-group-label>
            <n-input :value='props.path!' size='small' />
          </n-input-group>
        </div>
        <div>
          <n-input-group>
            <n-input-group-label size='small'>目标路径</n-input-group-label>
            <n-input v-model:value='state.path' placeholder='目标路径，使用/分割' size='small' />
          </n-input-group>
        </div>
        <div>
          <n-space align='center' justify='center'>
            <n-button size='small' type='error' @click='close'>取消</n-button>
            <n-button :loading='state.saving' size='small' type='primary' @click='move'>移动</n-button>
          </n-space>
        </div>
      </n-space>
    </n-card>
  </n-modal>
</template>

<style scoped>
.resources-move-modal {
  width: 800px;
}
</style>
